<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
    {{total}}
    <hr>
    <!--//此处监听了两个事件，可以在B组件或者C组件中直接触发-->
    <child1
            :p-param1="param1"
            p-param2="param2"
            v-on:test1="onTest1"
            v-on:test2="onTest2">
    </child1>
</div>
<script>
    Vue.component('child1', {
        template: '<div class="child-1">' +
            ' <p>in child1:</p>' +
            ' <p>props: {{pChild1}}</p>' +
            ' <p>$attrs: {{$attrs}}</p>' +
            ' <hr>' +
            ' <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->' +
            ' <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->' +
            ' <child2 v-bind="$attrs" v-on="$listeners"></child2>' +
            ' </div>',
        props: ['pChild1'],
        data: function () {
            return {}
        },
        inheritAttrs: false,
        mounted () {
            this.$emit('test1');
        }
    });

    Vue.component('child2', {
        template: '<div class="child-2">' +
            ' <p>in child2:</p>' +
            ' <p>props: {{pChild2}}</p>' +
            ' <p>$attrs: {{$attrs}}</p>' +
            ' <hr>' +
            ' </div>',
        props: ['pChild2'],
        data: function () {
            return {}
        },
        inheritAttrs: false,
        mounted () {
            console.log(this.$listeners)
            this.$emit('test2', 'child1');
        }
    });


    new Vue({
        el: '#app',
        data: {
            total: 0,
            param1 : '112121'
        },
        methods: {
            onTest1(e) {
                console.log('test1 running...');
            },
            onTest2(e) {
                this.total = e
                console.log('test2 running', e);
            }
        }
    });
</script>
</body>
</html>
